<template>
    <div class="order">
        <div style="margin-left: 10%;margin-right:10% ;">
    <table style="margin-top:30px">
        <tr>
            <th style="width:180px">图片</th>
            <th style="width:400px">名称</th>
            <th style="width:100px">单价</th>    
            <th style="width:100px">操作</th>    
        </tr>
        <tr v-for="value,index in product">
            <td><img :src="value.products.imgPath" alt="" ></td>
            <td >{{value.products.title}}</td>
            <td >{{value.products.price}}</td>
            <td><el-button type="danger" @click="Delete(value._id)">取消收藏</el-button></td>
        </tr>
    </table>
    </div>
    </div>
    </template>
  <script>
    export default {
        name: 'CollectView',
        data(){
        return{
            product:[]
        }
    },
    created(){
        this.axios.get('api/Getcollections').then(res => {      
            this.product = res.data.data
        })
    },
    methods:{
     Delete(id){
    this.product.splice(id,1)
     this.axios.delete('/api/deletecollection', { params: { id } })
    .then(res => {
      this.$message('取消收藏成功!')
    })
    .catch(err => {
      this.$message('取消收藏失败!')
    })
        }  
    }
    };
  </script>
  <style>
td:nth-child(1) img{
    width:100px
}
</style>